<script setup name="User">
	import {ref,reactive} from 'vue'
	import {userApi} from '@/api/user.js'
	
	let userList=ref([])
	//搜索条件
	let searchCondition = reactive({
		name: '',
		phone: ''
	})
	search()
	
	function search() {
		userApi.list(searchCondition).then(result =>{
			userList.value=result.data
			
		})
	}
</script>

<template>
	<div class="back">
		<div class="flex gap-4 mb-4">
			<!--		搜索条件-->
			<el-text tag="b">名字:</el-text>
			<el-input v-model="searchCondition.name" type="text" style="width: 240px" placeholder="请输入姓名关键字" />
			<el-text tag="b">联系方式:</el-text>
			<el-input v-model="searchCondition.phone" type="text" style="width: 240px" placeholder="请输入联系方式关键字" />
			<el-button type="primary" plain @click="search">搜索</el-button>
		</div>
<!--		信息表格-->
		<el-table :data="userList" border style="width: 100%">
			<el-table-column type="selection" width="40" />
			<el-table-column fixed prop="id" label="ID" sortable width="100" align="center"/>
			<el-table-column prop="name" label="姓名" align="center" />
			<el-table-column prop="password" label="密码" align="center" />
			<el-table-column prop="nickName" label="昵称" align="center" />
			<el-table-column prop="email" label="邮箱"  align="center"/>
			<el-table-column prop="phone" label="联系方式" align="center" />
			<el-table-column fixed="right" label="操作" min-width="120" align="center">
				<template #default>
					<el-button link type="primary" size="small" @click="handleClick">详情</el-button>
					<el-button link type="warning" size="small">编辑</el-button>
					<el-button link type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<style scoped>
	.back {
		background-color: skyblue;
		box-shadow: 0 0 10px;
		border-radius: 10px;
		padding: 20px;
	}
	
	button {
		margin: 0 5px;
	}
	
	li {
		font-size: 20px;
	}
</style>